<template>
   <div class="home-container">
     <div class="home-pages">
        <router-view />
     </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="records" to="/home/todo">待办</van-tabbar-item>
      <van-tabbar-item icon="notes-o" to='/home/calendar'>日历</van-tabbar-item>
      <van-tabbar-item icon="contact" to='/home/personal'>个人中心</van-tabbar-item>
    </van-tabbar>
   </div>
</template>
<script>
import { Toast } from 'vant';

import { reactive, toRefs } from "@vue/composition-api";

export default {
  setup(props,{root}){
      const state = reactive({
          active:0
      })
      console.log(root.$store.state);
      const escLogin =()=> {
        window.localStorage.removeItem('token');
        root.$router.push('/')
        Toast.success('退出登录成功');
      }

      const onChange =(index)=> {
        console.log(index);
      }

      return{
        ...toRefs(state),
        escLogin,
        onChange
      }
  }
}
</script>

<style lang="less" scoped>
 .home-container{
   overflow-y: auto;
   width: 10rem;
  .esc{
    margin-left: 3.6rem;
  }
  .home-pages{
    // padding: 0 0.26667rem;
  }
 }
</style>
